<template>
  <div>
    <el-dialog title="选择" top="7vh" :visible.sync="dialogVisible" width="70%" :modal-append-to-body="false"
      append-to-body>
      <el-container style="height:71vh;margin-top: -30px;margin-bottom: -30px;">
        <el-header>
          <div style="display:flex;justify-content: flex-end;">
            <el-input v-model="form.title" size="mini" placeholder="请输入关键字" style="width: 200px;" class="filter-item"
              @keyup.enter.native="handleFilter" />
            <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
              搜索
            </el-button>
          </div>
        </el-header>
        <el-container>
          <el-aside
            style="width: 100px;height:60vh;background-color: #fbfbfb;overflow-y: auto;border:1px solid #eee;padding: 0;;">
            <el-menu style="background-color: #fbfbfb;border:0;" :default-active="key" @select="onAsideSelect">
              <el-menu-item v-for="(item,index) in menu" :key="index" style="padding-left:0;text-align:center;"
                :index="item.key">
                {{ item.name }}
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-container style="height:60vh;">
            <el-main style="overflow-y: auto;width:100%;">
              <el-table ref="multipleTable" :key="tableKey" v-loading="listLoading" :data="list" border fit
                highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="课程描述" min-width="150px">
                  <template slot-scope="{row}">
                    <div style="display: flex;">
                      <img style="width: 100px;height:50px;" :src="row.cover" alt="">
                      <div style="display: flex;flex-direction: column;margin-left: 10px;">
                        <span>{{ row.title }}</span>
                        <span style="color: red;">￥{{ row.price }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="类型">
                  <template>
                    <span>图文</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
            <el-footer>
              <pagination v-show="total>0" style="padding: 0;margin:0;padding-top: 10px;" :total="total"
                :page.sync="form.page" :limit.sync="form.limit" layout="total,prev,pager,next" @pagination="getList" />
            </el-footer>
          </el-container>
        </el-container>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  // todo 不注释无法提交 引入api目录下的所有模块，存在对象中，返回的值都是module
  const M = {}
  function importAll(r) {
    r.keys().forEach(key => M[key] = r(key))
  }
  importAll(require.context('@/api/', true, /\.js$/))
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'ChooseCourse',
    components: {
      Pagination
    },
    data() {
      return {
        menu: [{
          key: 'media',
          name: '图文'
        },
        {
          key: 'video',
          name: '视频'
        }, {
          key: 'audio',
          name: '音频'
        }
        ],
        key: 'media',
        dialogVisible: false,
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        form: {
          title: '',
          page: 1,
          limit: 20
        },
        callback: null,
        limit: -1,
        multipleSelection: []
      }
    },
    methods: {
      confirm() {
        if (this.multipleSelection.length <= 0) {
          return this.$message.error('至少选择一个')
        }
        if (this.limit > 0 && this.multipleSelection.length > this.limit) {
          return this.$message.error(`最多选择${this.limit}个`)
        }
        this.callback(this.multipleSelection)
        this.hide()
        this.$refs.multipleTable.clearSelection()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      getList() {

        const fetchList = M[`./${this.key}.js`].fetchList
        this.listLoading = true
        fetchList(this.form).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
      },
      onAsideSelect(e) {
        this.form.page = 1
        this.key = e
        this.getList()
      },
      handleFilter() {
        this.form.page = 1
        this.getList()
      },
      show(callback, limit) {
        this.callback = callback
        this.limit = limit || -1
        this.getList()
        this.dialogVisible = true
      },
      hide() {
        this.dialogVisible = false
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => { })
      }
    }
  }

</script>